<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../mui/css/mui.min.css">
    <link rel="stylesheet" href="../../css/main.css">
    
    <link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../css/icons-extra.css">
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../mui/js/mui.min.js"></script>
    <title>首页</title>
</head>

<body class="m">
    <div id="container" class="panel">
        
    </div>
    <div class="meun-bottom">
        <ul> 
            <li class="meun-li" source="Home"><span class="mui-icon mui-icon-home"></span>首页</li>
            <li class="meun-li" source="Category"><span class="mui-icon-extra mui-icon-extra-class"></span>分类</li>
            <li class="meun-li" source="Car"><span class="mui-icon-extra mui-icon-extra-cart"></span>购物车</li>
            <li class="meun-li" source="Account"><span class="mui-icon mui-icon-person"></span>我的</li>
        </ul>
    </div>
</body>

</html>
<script>
    $(function(){
        $('li.meun-li[source="Home"]').click();
    });
    $(".meun-li").click(function () {
        $(".meun-li").each(function () {  
            $(this).removeClass("meunactive");
        });
        $.ajax({
            type: "get"
            , url: "Member/" + $(this).attr("source") + ".html"
            , success: function (res) {
                $("#container").html(res);
            }
        });
        $(this).addClass("meunactive");
        console.log(1);
    });
</script>